<template>
	<!-- 运营系统-公司管理 -->
	<d2-container class="d-flex flex-column">
		<template v-if="$hasPermission('playlet:playletBlocksRanking:index')">
          
			
            <template v-if="diymainbox">
                <div class="d-flex j-sb" slot="header">

                    <el-form class="d-flex b-s mt-2 mb-10" :inline="true" size="small" :model="dataForm"
                        @submit.native.prevent>
                        
                        <!-- <el-form-item label="模块">
                            <el-select clearable v-model="dataForm.status" placeholder="请选择模块">
                                <el-option v-for="(item,index) in status" :key="index" :label="item.label" :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="小程序">
                            <el-select clearable v-model="dataForm.status" placeholder="请选择小程序">
                                <el-option v-for="(item,index) in status" :key="index" :label="item.label" :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button icon="el-icon-search" type="primary"
                                @click="getTableList(true)">查询</el-button>
                        </el-form-item> -->
                        <!-- <el-form-item>
                            <el-button type="success" icon="el-icon-circle-plus-outline" v-show="$hasPermission('playlet:company:create')"
                                @click="addOrUpdateData()">新增</el-button>
                        </el-form-item> -->
                    </el-form>
                    <div class="d-flex">
                        <vxe-toolbar ref="toolbarRef" custom :refresh="{ queryMethod: getModuleList,code:'query' }"></vxe-toolbar>
                    </div>

                </div>
                <div class="d-flex h-100 b-s flex-column">
                    <div class="d-flex flex-1">
                        <div class="overflow">
                            <vxe-table ref="companyTable" key="companyTable" border height="100%" resizable size="medium"
                                :loading="tableLoading" :loading-config="{icon: 'vxe-icon-indicator roll', text: '正在拼命加载中...'}"
                                :data="ModuleList">
                                <vxe-column width="100" field="id" title="ID" sortable align="center"></vxe-column>
                                <vxe-column width="300" field="name" title="模块名称" align="center"></vxe-column>
                                <!-- <vxe-column width="350" field="applet_name" title="公司绑定的小程序名称" align="center"></vxe-column>
                                <vxe-column width="120" field="status_name" title="状态" align="center"></vxe-column> -->
                                <vxe-column width="160" field="created_at" title="创建时间" sortable cell-type="string" align="center"></vxe-column>
                                <vxe-column width="160" field="updated_at" title="修改时间" sortable cell-type="string" align="center"></vxe-column>
                                <vxe-column width="160" v-if="!tableLoading||(ModuleList.length&&$hasPermissionNum(['playlet:playletBlocksRanking:update']))" title="操作" fixed="right"  align="center" cell-class-name="py-10">
                                    <template v-slot="{ row }">
                                        <el-button size="small" round icon="el-icon-edit"
                                        v-if="$hasPermission('playlet:playletBlocksRanking:update')"
                                        @click="addOrUpdateData(row)" type="primary">预览配置</el-button>

                                        
                                    </template>
                                </vxe-column>
                                <template #empty>
                                    <div class="d-flex flex-row a-center j-center font-md">
                                        <div class="d-flex">
                                            暂时没有数据~
                                        </div>
                                    </div>
                                </template>
                            </vxe-table>
                        </div>
                    </div>
			    </div>
                <!-- 分页 -->
                <div class="d-flex" slot="footer">
                    <vxe-pager background size="medium" align="right" :border="false" :pageSizes="[20,50,100,150,200]"
                        :current-page="dataForm.page" :page-size="dataForm.pageSize" :total="total"  :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'Sizes', 'FullJump', 'Total']"
                        @page-change="handlePageChange">
                    </vxe-pager>
                </div>
			    <!-- 新增/修改弹窗 -->
			    <!-- <company-add-or-update v-if="addOrUpdateVisible" ref="addOrUpdateDialog" @refreshDataList="getTableList"></company-add-or-update> -->
            </template>
			<template v-else>
                <div class="d-flex j-sb" slot="header">

                    <el-form class="d-flex b-s mt-2 mb-10 width_full j_between" :inline="true" size="small" :model="dataForm"
                        @submit.native.prevent>
                        
                        
                        <el-form-item>
                            <el-button icon="el-icon-search" type="primary"
                                @click="goback()">返回</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button v-if="$hasPermission('playlet:playletBlocksRanking:update')" icon="el-icon-s-claim" type="primary"
                                @click="keepdata()">保存</el-button>
                        </el-form-item>
                        <!-- <el-form-item>
                            <el-button type="success" icon="el-icon-circle-plus-outline" v-show="$hasPermission('playlet:company:create')"
                                @click="addOrUpdateData()">新增</el-button>
                        </el-form-item> -->
                    </el-form>
                    

                </div>
                <div class="d-flex h-100 b-s flex-column">
                    <div class="d-flex flex-1 overflow j_between" style="background: whitesmoke;">
                        <!-- 1 -->
                        <div class="d-flex flex-1">
                            <div class="overflow">
                                <vxe-table ref="playletTable" key="playletTable" border height="100%" resizable size="medium"
                                    :loading="tableLoading" :loading-config="{icon: 'vxe-icon-indicator roll', text: '正在拼命加载中...'}"
                                    :data="AllvideoList">
                                    <vxe-column width="100" field="value" title="ID" sortable align="center"></vxe-column>
                                    <vxe-column width="200" field="label" title="短剧名称" align="center"></vxe-column>
                                    <vxe-column width="200" field="cover" title="短剧封面图" align="center">
                                        <template v-slot="{ row }">
                                            <img class="pointer" width="80" height="auto" :src="row.cover" style="border-radius: 5px;"
                                                @click.stop="previewPicFn(row.cover,row.name+' 封面图')">
                                        </template>
                                    </vxe-column>
                                    <vxe-column v-if="!tableLoading||(AllvideoList.length&&$hasPermissionNum(['playlet:playletBlocksRanking:update']))" 
                                    title="操作" fixed="right" 
                                    width="160" 
                                    align="center" cell-class-name="py-10">
                                        <template v-slot="{ row }">
                                            <el-button size="small" round icon="el-icon-video-play"
                                            
                                            @click="addvideo(row)" :type="checkone(row)" :disabled="checkDisabled(row)">添加短剧</el-button>
                                        </template>
                                    </vxe-column>
                                    <template #empty>
                                        <div class="d-flex flex-row a-center j-center font-md">
                                            <div class="d-flex">
                                                暂时没有数据~
                                            </div>
                                        </div>
                                    </template>
                                </vxe-table>
                            </div>
				        </div>
                       
                        <!-- 2 -->
                        <div class="centers" style="width: 60%;padding:15px;overflow: hidden;">
                            <!-- <div class="diycontainer" style="width:370px;height: 700px;background: rgb(243 248 249);border: 8px solid #666;overflow-y: scroll;padding:12px">
                                <div class="width_full" style="background: #fff;min-height: 250px;border-radius: 8px;padding:12px">
                                    <div class="fs16 fw500">{{keepname}}</div>
                                    <div class="flex wrap width_full videobox" style="width: 100%;margin-top:12px;">
                                        <draggable class="width_full flex wrap diydingwei" v-model="myArray"  chosenClass="chosen" forceFallback="true" group="people" animation="500" @start="onStart" @end="onEnd">
                                            <transition-group>
                                            <div class="videocard relative" v-for="(item,index) in myArray" :key="item.id" style="margin-bottom: 15px;">
                                                
                                                <div v-if="$hasPermissionNum(['playlet:playletBlocksRanking:update'])" @click.stop="diydel(index)" class="absolute" style="width: 15px;height:15px;z-index:1;left:-6px;top:-6px;border-radius: 50%;">
                                                    <i class="el-icon-remove-outline" style="color: red;background: #fff;border-radius: 50%;"></i>
                                                    </div>
                                                <div class="width_full" style="height:132px;border-radius:8px;">
                                                    <el-image
                                                    class="width_full"
                                                    style="height:132px;border-radius:8px;"
                                                    :src="item.cover" alt=""
                                                    fit="cover"></el-image>
                                                </div>
                                                <div class="flex j_center fs12 t_center fw400" style="padding-top: 8px;">{{item.name}}</div>
                                            </div>
                                            </transition-group>
                                        </draggable> 
                                        
                                    </div>
                                </div>
                            </div> -->

                            <div class="diybody">
                                <div class="iphone">
                                    <div class="iphone-top">
                                    <span class="camera"></span>
                                    <span class="sensor"></span>
                                    <span class="speaker"></span>
                                    </div>
                                    <div class="top-bar"></div>
                                    <div class="iphone-screen">
                                        <div class="diycontainer" style="width:278px;height: 524px;background: rgb(243 248 249);overflow-y: scroll;padding:12px">
                                            <div class="width_full" style="background: #fff;min-height: 250px;border-radius: 8px;padding:12px">
                                                <div class="fs16 fw500">{{keepname}}</div>
                                                <div class="flex wrap width_full videobox" style="width: 100%;margin-top:12px;">
                                                    <draggable class="width_full flex wrap diydingwei" v-model="myArray"  chosenClass="chosen" forceFallback="true" group="people" animation="500" @start="onStart" @end="onEnd">
                                                        <transition-group>
                                                        <div class="videocard relative" v-for="(item,index) in myArray" :key="item.id" style="margin-bottom: 15px;">
                                                            
                                                            <div v-if="$hasPermissionNum(['playlet:playletBlocksRanking:update'])" @click.stop="diydel(index)" class="absolute" style="width: 15px;height:15px;z-index:1;left:-6px;top:-6px;border-radius: 50%;">
                                                                <i class="el-icon-remove-outline" style="color: red;background: #fff;border-radius: 50%;"></i>
                                                                </div>
                                                            <div class="width_full" style="height:106px;border-radius:8px;">
                                                                <el-image
                                                                class="width_full"
                                                                style="height:106px;border-radius:8px;"
                                                                :src="item.cover" alt=""
                                                                fit="cover"></el-image>
                                                            </div>
                                                            <div class="flex j_center fs12 t_center fw400" style="padding-top: 8px;">{{item.name}}</div>
                                                        </div>
                                                        </transition-group>
                                                    </draggable> 
                                                    
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="buttons">
                                    <span class="on-off"></span>
                                    <span class="sleep"></span>
                                    <span class="up"></span>
                                    <span class="down"></span>
                                    </div>
                                    <div class="bottom-bar"></div>
                                    <div class="iphone-bottom">
                                    <span></span>
                                    </div>
                                </div>
                                </div>
                            </div>
                        </div>
                        
                    </div>
			    </div>
            </template>
		</template>
		<template v-else>
			<div class="d-flex a-center j-center h-100 b-s flex-column">
				<div class="d-flex">抱歉，您没有访问权限</div>
			</div>
		</template>
	</d2-container>
</template>

<script>
    import draggable from 'vuedraggable'
	import mixinViewModule from '@/mixins/view-module'
	import CompanyAddOrUpdate from './company-add-or-update'
	export default {
		mixins: [mixinViewModule],
		components: {
			CompanyAddOrUpdate,
            draggable
		},
		data() {
			return {
                keepname:null,
                keepid:null,
                myArray:[
                // {people:'cn',id:10,name:'www.itxst.com'},
                // {people:'cn',id:20,name:'www.baidu.com'},
                // {people:'cn',id:30,name:'www.taobao.com'},
                // {people:'us',id:40,name:'www.yahoo.com'}
                ],
                ModuleList:[],
				diymainbox:true,
				tableLoading:false,
				total:0,
				curName:'',
				status:[{
					value:0,
					label:'禁用',
				},{
					value:1,
					label:'正常',
				}],
				// 增改
				addOrUpdateVisible: false,
				dataList:[],
				dataForm: {
					page:1,
					pageSize:20,
					keyword: '',
					status:''
				}
			}
		},
		created() {
            console.log(228,this.$hasPermission('playlet:playletBlocksRanking:update'))
			if(this.$hasPermission('playlet:playletBlocksRanking:index')){
				// this.getTableList();
                this.getModuleList();
                this.getAllvideoList();
			}
		},
        computed:{
            
        },
		methods: {
			// async getTableList(init=false){
			// 	if(init&&typeof init =='boolean'){
			// 		this.dataForm.page = 1;
			// 	}
			// 	this.tableLoading = true;
			// 	const tableRes = await this.$axios.get('/api/playlet/company?'+this.$qs.stringify(this.dataForm))
			// 	this.tableLoading = false;
			// 	this.dataList = tableRes.data;
			// 	this.total = tableRes.total;
			// },
            async getModuleList(){
                this.tableLoading = true;
				const tableRes = await this.$axios.get('/api/playlet/playletBlocksRanking')
                console.log(201,tableRes)
                this.tableLoading = false;
                this.ModuleList = tableRes.data;
                this.total = tableRes.total;
				// this.ModuleList = tableRes.total;
			},
            async getAllvideoList(){
                this.tableLoading = true;
				const tableRes = await this.$axios.get('/api/common/playletBlocksRanking')
                console.log(220,tableRes)
                this.tableLoading = false;
                this.AllvideoList = tableRes;

			},
			//新增/修改弹窗
			async addOrUpdateData(row) {
				console.log(211,row)
                const tableRes = await this.$axios.get(`/api/playlet/playletBlocksRanking/update/${row.id}`)
                this.keepid = row.id
                this.keepname = row.name
				// this.addOrUpdateVisible = true;
                this.myArray = tableRes
                console.log(214,tableRes)
				this.diymainbox = false;
			},
            checkone(e){
                let myArray = this.myArray
                console.log(222,e,myArray)
                console.log(234,myArray.some(item=>item.id == e.value))
                if(myArray.some(item=>item.id == e.value)){
                    return 'info'
                }else{
                    return 'primary'
                }
            },
            checkDisabled(e){
                let myArray = this.myArray
                console.log(222,e,myArray)
                console.log(234,myArray.some(item=>item.id == e.value))
                if(myArray.some(item=>item.id == e.value)){
                    return true
                }else{
                    return this.$hasPermission('playlet:playletBlocksRanking:update')?false:true
                }
            },
            diydel(e){
                console.log(227,e)
                this.$confirm(this.$t('public.prompt.info', {
					handle: this.$t('views.public.delete')
				}), this.$t('public.prompt.title'), {
					confirmButtonText: this.$t('views.public.confirm'),
					cancelButtonText: this.$t('views.public.cancel'),
					type: 'warning'
				}).then(() => {
                    this.myArray.splice(e,1);
                    console.log(229,this.myArray)
				}).catch(() => {})
               
            },
            addvideo(e){

                let obj = {
                    cover:e.cover,
                    id:e.value,
                    name:e.label
                }
                this.myArray.push(obj)
                console.log(284,e)

            },
            
            goback(){
                this.diymainbox = true;
            },
            keepdata(){
                let arr = [];
                let myArray = this.myArray
                myArray.forEach(element => {
                    if(element.id){
                        arr.push(element.id)  
                    }
                });
                console.log(329,arr)
                let id = this.keepid 
                let obj = {
                    playlet_ids:arr
                }
                this.$axios.post(`/api/playlet/playletBlocksRanking/update/${id}`,obj).then(res=>{
                    console.log(337,res)
                    this.$message({
							message: this.$t('views.public.success'),
							type: 'success',
							duration: 1000
							
						})
                    this.goback()
                    this.getModuleList(); 

                })
                

            },
             //开始拖拽事件
            onStart(){
                this.drag=true;
                console.log(204,this.myArray)
            },
            //拖拽结束事件
            onEnd() {
                this.drag=false;
                console.log(209,this.myArray)
            },
		
		}
	}
</script>

<style scoped>
    *{
        box-sizing: border-box;
    }
    .videocard{
        margin-right: 15px;
        width: calc((100% - 30px)/3);
    }
    .videobox>.videocard:nth-child(3n){
        margin-right: 0 !important;
    }

    .item {
            padding: 6px;
            background-color: #fdfdfd;
            border: solid 1px #eee;
            margin-bottom: 10px;
            cursor: move;
        } 
        /*选中样式*/
        .chosen {
            border: solid 1px #3089dc !important;
        }

    .diydingwei>span{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }
    .diydingwei>span>.videocard:nth-child(3n){
        margin-right: 0 !important;
    }
    .diycontainer::-webkit-scrollbar{
        width: 0;
    }

    *, *:after, *:before {
		  box-sizing: border-box;
		}
			
		.diybody {
            width: 100%;
            height: 100%;
            overflow-y: scroll;
            background: linear-gradient(-45deg, #3d1313, #631a35, #14485b, #257b67);
		  /* background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); */
			background-size: 400% 400%;
			animation: gradientBG 15s ease infinite;
		}
        .diybody::-webkit-scrollbar{
        width: 0;
        }
		@keyframes gradientBG {
			0% {
				background-position: 0% 50%;
			}
			50% {
				background-position: 100% 50%;
			}
			100% {
				background-position: 0% 50%;
			}
		}
		.iphone {
		  box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px #999, 0 0 30px 0px rgba(0, 0, 0, 0.7);
		  border: 5px solid #d9dbdc;
		  background: #f8f8f8;
		  padding: 15px;
		  border-radius: 50px;
		  height: 700px;
		  width: 320px;
		  position: relative;
		  margin: 15px auto;
		  /* transform: scale(0.8); */
          transform-origin: top;
		}
		
		.iphone-top {
		  padding: 5px 88px 40px;
		  position: relative;
		}
		.iphone-top .speaker {
		  display: block;
		  width: 45px;
		  height: 4px;
		  margin: -2px auto;
		  border-radius: 6px;
		  background: #292728;
		}
		.iphone-top .camera {
		  display: block;
		  margin: 0 auto;
		  height: 6px;
		  width: 6px;
		  border-radius: 50%;
		  margin-bottom: 13px;
		  background: #333;
		}
		.iphone-top .sensor {
		  display: block;
		  width: 10px;
		  height: 10px;
		  float: left;
		  background: #333;
		  margin-top: -5px;
		  border-radius: 50%;
		}
		
		.top-bar, .bottom-bar {
		  display: block;
		  width: 320px;
		  height: 15px;
		  border-left: 5px solid #BBB;
		  border-right: 5px solid #BBB;
		  position: absolute;
		  left: -5px;
		}
		
		.top-bar {
		  top: 65px;
		}
		
		.bottom-bar {
		  bottom: 65px;
		}
		
		.iphone-screen {
		  background: #eee;
		  border: 1px solid #fff;
		  height: 525px;
		  width: 280px;
		  margin: 0 auto;
          border: 1px solid rgb(169 163 163 / 90%);
		  /* border: 2px solid rgba(0, 0, 0, 0.9); */
		  border-radius: 3px;
		  overflow: hidden;
		  background-size: cover;
		  background-repeat: no-repeat;
		}
		.iphone-screen img {
		  width: 100%;
		}
		
		.buttons .on-off, .buttons .up, .buttons .down, .buttons .sleep {
		  display: block;
		  background: #CCC;
		  position: absolute;
		  border-radius: 2px 0px 0px 2px;
		}
		.buttons .on-off {
		  height: 40px;
		  width: 3px;
		  top: 100px;
		  left: -8px;
		}
		.buttons .up, .buttons .down, .buttons .sleep {
		  height: 60px;
		  width: 5px;
		  left: -10px;
		}
		.buttons .up {
		  top: 170px;
		}
		.buttons .down {
		  top: 250px;
		}
		.buttons .sleep {
		  left: auto;
		  right: -10px;
		  top: 170px;
		  border-radius: 0px 2px 2px 0px;
		}
		
		.iphone-bottom {
		  padding: 10px 0 0;
		}
		.iphone-bottom span {
		  display: block;
		  margin: 0 auto;
		  width: 56px;
		  height: 56px;
		  background: #ccc;
		  border-radius: 50%;
		  background: linear-gradient(135deg, #303233 0%, #b5b7b9 50%, #f0f2f2 69%, #303233 100%);
		  position: relative;
		}
		.iphone-bottom span:after {
		  content: "";
		  display: block;
		  width: 48px;
		  height: 48px;
		  background: #fff;
		  border-radius: 50%;
		  position: absolute;
		  left: 4px;
		  top: 4px;
		}
</style>